<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow,
		onUnload,
		onHide
	} from '@dcloudio/uni-app';
	import {
		listenYinBiaoXUnLianApi,
		submitListenApi
	} from '/api/request.js';
	let platform = uni.getStorageSync('platform');
	const props = defineProps({});
	const list = ref([]);
	const id = ref('');
	onLoad(async (e) => {
		id.value = e.id;
		let res = await listenYinBiaoXUnLianApi({
			record_id: id.value
		});
		console.log(res);
		list.value = res.data;
		play();
		console.log(list.value);
	});
	onHide(() => {
		uni.$emit('pause');
	});
	onUnload(() => {
		uni.$emit('pause');
	});
	const play = () => {
		uni.$emit('playAudio', list.value[selectIndex.value].phonetic_audio_en);
	};

	const goback = () => {
		uni.navigateBack();
	};
	const center = ref(null);
	const showModel = (index) => {
		if (index == 0) center.value.open('center');
	};
	const selectIndex = ref(0);
	const checkIndex = ref(null);
	const allRight = ref([]);
	const allError = ref([]);
	const selectFanyi = computed(() => {
		if (!list.value.length) return [];
		let arr = [];
		arr.push(list.value[selectIndex.value].name);
		arr = arr.concat(list.value[selectIndex.value].error);
		for (let i = arr.length - 1; i > 0; i--) {
			const j = Math.floor(Math.random() * (i + 1));
			[arr[i], arr[j]] = [arr[j], arr[i]];
		}
		return arr;
	});
	const times = ref(null)
	const clickItem = (check, indexss) => {
		if (times.value) {
			return
		}
		checkIndex.value = indexss;
		const id = list.value[selectIndex.value].id;
		if (list.value[selectIndex.value].name == check) {
			// 播放对的音频
			allRight.value.push(id);
			if (selectIndex.value == list.value.length - 1) {
				center.value.open('center');
			} else {
				times.value = setTimeout(() => {
					checkIndex.value = null;
					selectIndex.value++;
					play();
					clearTimeout(times.value)
					times.value = null
				}, 600)
			}
			return;
		}
		const index = allError.value.findIndex((item) => item == id);
		if (index == -1) {
			allError.value.push(id);
		}
	};
	const getClass = (check, index) => {
		if (checkIndex.value == index) {
			if (list.value[selectIndex.value].name == check) {
				return 'active';
			} else {
				return 'default';
			}
		}
	};
	const que = async () => {
		center.value.close();
		uni.navigateBack()
	};
</script>

<template>
	<view class="wrap" :style="{
            height: platform.gaodu + 'rpx'
        }">
		<view class="header-wrap uni-row" :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }">
			<image class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
			<view class="title"> 听音辨词 </view>
			<image style="opacity: 0" class="left" src="/static/img/goback-black.png" mode="widthFix" />
		</view>
		<scroll-view scroll-y="true" :style="{ height: platform.gaodu - platform.dingbu - 96 + 'rpx' }">
			<view class="body uni-col">
				<view class="zhuangtat uni-col">
					<view class="title"> 第一关 </view>
					<image @click="play" src="/static/img/user/world/laba.png" class="laba"></image>
				</view>
				<view class="list" v-if="list && list.length">
					<view @click="clickItem(item, index)" class="item uni-row" v-for="(item, index) in selectFanyi"
						:key="index" :class="getClass(item, index)">
						{{ item }}
					</view>
				</view>
				<view class="footer uni-row">
					<view class="item active uni-row">
						<image src="/static/img/user/world/dui.png" class="dui"></image>
						<text>{{ allRight.length }}</text>
					</view>
					<view class="item default uni-row">
						<image src="/static/img/user/world/cuo.png" class="cuo"></image>
						<text>{{ allError.length }}</text>
					</view>
				</view>
				<view class="index">
					{{selectIndex+1}}/{{list.length}}
				</view>
			</view>
		</scroll-view>
	</view>
	<uni-popup ref="center" :mask-click="false">
		<view class="wai">
			<view class="title"> 温馨提示 </view>
			<view class="label"> 总音标字母组合：{{ list.length }} </view>
			<view class="label"> 正确次数：{{ allRight.length }} </view>
			<view class="label"> 错误次数：{{ allError.length }} </view>
			<view class="footer uni-row">
				<view class="shi bt" @click="que"> 确定 </view>
			</view>
		</view>
	</uni-popup>
</template>

<style scoped lang="less">
	.wai {
		width: 606rpx;
		height: 378rpx;
		background: #f4eeff;
		border-radius: 64rpx;
		padding: 48rpx 96rpx;
		text-align: center;
		color: #333333;

		.title {
			font-size: 32rpx;
			margin-bottom: 10rpx;
		}

		.label {
			font-size: 28rpx;
			margin: 10rpx 0;
			text-align: center;
		}

		.footer {
			justify-content: center;

			.bt {
				width: 300rpx;
				height: 68rpx;
				font-size: 24rpx;
				line-height: 68rpx;
				border-radius: 36rpx;
			}

			.shi {
				margin-top: 20rpx;
				background: #9561f3;
				color: #fff;
			}
		}
	}

	.wrap {
		.index {
			text-align: center;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #333333;
		}

		background: url('/static/img/wolrd/bg.png');
		background-size: 100% 100%;

		.header-wrap {
			justify-content: space-between;
			padding-left: 24rpx;
			padding-right: 24rpx;

			.left {
				width: 48rpx;
			}

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.body {
			justify-content: space-between;
			height: 100%;
			padding: 54rpx 0 80rpx;

			.zhuangtat {
				justify-content: center;
				align-items: center;

				.title {
					font-size: 36rpx;
					color: #333333;
				}

				.laba {
					margin-top: 30rpx;
					width: 80rpx;
					height: 80rpx;
				}
			}

			.list {
				.item {
					justify-content: center;
					width: 574rpx;
					height: 98rpx;
					background: #fff;
					border-radius: 16rpx;
					margin: 0 auto 40rpx;

					&:last-child {
						margin-bottom: 0;
					}

					&.active {
						background-color: #5bd145;
						color: #fff;
					}

					&.default {
						background-color: #ef4828;
						color: #fff;
					}
				}
			}

			.footer {
				justify-content: space-around;

				.item {
					justify-content: space-around;
					width: 184rpx;
					height: 124rpx;
					border-radius: 16rpx;

					&.active {
						background: #78e764;
						border: 2rpx solid #5bd145;
					}

					&.default {
						background: #ff7373;
						border: 2rpx solid #ff4242;
					}

					.dui,
					.cuo {
						width: 48rpx;
						height: 48rpx;
					}

					text {
						font-size: 28rpx;
						color: #fff;
					}
				}
			}
		}
	}
</style>